<!--配置屏蔽选项-->
<script setup>
import {onMounted, ref} from "vue";
import {useStore} from "vuex";
import {ElementUtils} from "@/assets/js/ElementUtils";
import {DeleteFilled} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import UserLink from "@/components/common/link/UserLink.vue";

const props = defineProps({
  data: {type: Object},
})
const store = useStore();

const getBlockData = (force) => {
  const loading = ElementUtils.loading({target: "#block_data_config",});
  return store.dispatch("Block/getBlockData", force).then(r => {
    blockData.value = r
    if (force) ElementUtils.notice({message: "刷新成功"})
    return r;
  }).catch(ElementUtils.exceptionHandler).finally(() => {
    loading.close()
  });
}
const setBlockData = () => store.dispatch("Block/setBlockData", blockData.value).then(res => {
  ElementUtils.notice({message: res})
  getBlockData();
})

const addKeywords = () => {
  ElMessageBox.prompt("多个以空格隔开", `请填写关键字`, {}).then(({value}) => {
    value.split(" ").filter(i => !!i).forEach(i => blockData.value.keywords.push(i))
  })
}
const addUsers = () => {
  ElMessageBox.prompt("可以填写用户ID或用户名,多个以空格隔开", `请填写用户`, {}).then(({value}) => {
    value.split(" ").filter(i => !!i).forEach(i => blockData.value.users.push(i))
  })
}

const blockData = ref();

onMounted(() => {
  getBlockData()
})
</script>

<template>
  <div id="block_data_config">
    <el-button-group type="primary">
      <el-button @click="getBlockData(true)">刷新</el-button>
      <el-button type="success" @click="setBlockData()">保存</el-button>
    </el-button-group>
    <div v-if="blockData">
      <h4>关键字 -
        <el-button size="small" type="primary" @click="addKeywords">+</el-button>
      </h4>
      <div>
        <ul>
          <li v-if="blockData.keywords.length===0">暂无</li>
          <li v-for="(item,index) in blockData.keywords" v-else>{{ item }}
            <el-icon color="red" style="cursor: pointer" @click="blockData.keywords.splice(index,1)">
              <DeleteFilled/>
            </el-icon>
          </li>
        </ul>
        <div>
          TIPS:当关键字出现在主题标题中时，该主题将被屏蔽；当关键字出现在正文中时，该回复将被屏蔽；
        </div>
      </div>
      <h4>用户 -
        <el-button size="small" type="primary" @click="addUsers">+</el-button>
      </h4>
      <div>
        <ul>
          <li v-if="blockData.users.length===0">暂无</li>
          <li v-for="(item,index) in blockData.users" v-else>
            <span v-if="!item.includes('/')">{{ item }}</span>
            <user-link v-else :user-id="Number(item.split('/')[0])" disable-tooltip>{{ item.split('/')[1] }}</user-link>
            <el-icon color="red" style="cursor: pointer" @click="blockData.users.splice(index,1)">
              <DeleteFilled/>
            </el-icon>
          </li>
        </ul>
        <div>
          TIPS:用户发布的主题和回复将会被屏蔽
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#block_data_config {
  min-height: 100px;
}
</style>